<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智慧农业数字孪生系统</title>
    <!-- Tailwind CSS v3 -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- Chart.js -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
    <!-- 统一的 Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#00ff9d',
                        secondary: '#0088ff',
                        dark: '#0a192f',
                        'dark-light': '#112240',
                        'bg-light': '#172a46',
                        'status-online': '#00ff9d',
                        'status-warning': '#ffcc00',
                        'status-alert': '#ff6b00',
                        'text-primary': '#e6f1ff',
                        'text-secondary': '#8892b0',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                    }
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 0 10px rgba(0, 255, 157, 0.5);
            }
            .bg-gradient-blue {
                background: linear-gradient(135deg, #0a192f 0%, #112240 100%);
            }
            .border-glow {
                box-shadow: 0 0 5px rgba(0, 255, 157, 0.5);
            }
            .card-hover {
                transition: all 0.3s ease;
            }
            .card-hover:hover {
                transform: translateY(-5px);
                box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            }
        }
    </style>
    <style>
        body {
            font-family: 'Inter', system-ui, sans-serif;
            background-color: #0a192f;
            color: #e6f1ff;
            overflow-x: hidden;
        }
        
        /* 自定义滚动条 */
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        
        ::-webkit-scrollbar-track {
            background: #112240;
        }
        
        ::-webkit-scrollbar-thumb {
            background: #2d3748;
            border-radius: 3px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: #4a5568;
        }
        
        /* 视频缩略图样式 */
        .video-thumbnail {
            border-radius: 0.5rem;
            overflow: hidden;
            cursor: pointer;
            position: relative;
            transition: all 0.3s ease;
        }
        
        .video-thumbnail:hover {
            transform: scale(1.02);
        }
        
        .camera-indicator {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            z-index: 10;
        }
        
        .bg-status-online {
            background-color: #00ff9d;
        }
        
        .bg-status-warning {
            background-color: #ffcc00;
        }
        
        .bg-status-alert {
            background-color: #ff6b00;
        }
        
        /* 农田标记点样式 */
        .field-marker {
            position: absolute;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: rgba(0, 255, 157, 0.7);
            border: 2px solid #00ff9d;
            transform: translate(-50%, -50%);
            cursor: pointer;
            transition: all 0.3s ease;
            z-index: 10;
        }
        
        .field-marker:hover {
            transform: translate(-50%, -50%) scale(1.2);
            box-shadow: 0 0 10px rgba(0, 255, 157, 0.7);
        }
        
        .field-marker.warning {
            background-color: rgba(255, 204, 0, 0.7);
            border-color: #ffcc00;
        }
        
        .field-marker.alert {
            background-color: rgba(255, 107, 0, 0.7);
            border-color: #ff6b00;
            animation: pulse 1.5s infinite;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            z-index: 1000;
            overflow: auto;
        }
        
        .modal-content {
            position: relative;
            margin: 5% auto;
            width: 90%;
            max-width: 1200px;
            animation: modalFadeIn 0.3s ease;
        }
        
        @keyframes modalFadeIn {
            from {
                opacity: 0;
                transform: translateY(-50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .close-modal {
            position: absolute;
            top: 10px;
            right: 15px;
            font-size: 24px;
            color: white;
            cursor: pointer;
            z-index: 1001;
        }
        
        .close-modal:hover {
            color: #00ff9d;
        }
        
        /* 通知中心样式 */
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
            width: 18px;
            height: 18px;
            background-color: #ff6b00;
            border-radius: 50%;
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 加载动画 */
        .loader {
            border: 3px solid rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            border-top: 3px solid #00ff9d;
            width: 24px;
            height: 24px;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 进度条样式 */
        .progress-container {
            width: 100%;
            height: 4px;
            background-color: #112240;
            border-radius: 2px;
            margin-top: 10px;
        }
        
        .progress-bar {
            height: 100%;
            background-color: #00ff9d;
            border-radius: 2px;
            width: 0%;
            transition: width 0.3s ease;
        }
        
        /* 数据图表样式 */
        .chart-container {
            position: relative;
            height: 200px;
            width: 100%;
        }
        
        /* 提示消息样式 */
        .toast {
            opacity: 0;
            transition: opacity 0.3s ease;
        }
    </style>
</head>
<body class="bg-dark text-text-primary">
    <!-- 顶部导航栏 -->
    <header class="bg-dark-light border-b border-bg-light">
        <div class="container mx-auto px-4 py-3 flex items-center justify-between">
            <div class="flex items-center">
                <div class="text-primary text-2xl mr-2">
                    <i class="fa fa-leaf"></i>
                </div>
                <div>
                    <h1 class="text-xl font-bold text-shadow">智慧农业数字孪生系统</h1>
                    <p class="text-xs text-text-secondary">实时监控与数据分析平台</p>
                </div>
            </div>
            <div class="flex items-center space-x-6">
                <div class="text-text-secondary text-sm">
                    <span id="current-date-time">2025-07-21 15:30:45</span>
                </div>
                <div class="relative">
                    <button id="notificationBtn" class="text-text-secondary hover:text-primary transition-colors">
                        <i class="fa fa-bell text-xl"></i>
                        <span class="notification-badge">3</span>
                    </button>
                </div>
                <div class="flex items-center">
                    <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-2">
                        <i class="fa fa-user"></i>
                    </div>
                    <span class="text-sm">管理员</span>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容区域 -->
    <main class="container mx-auto px-4 py-6 grid grid-cols-12 gap-6">
        <!-- 左侧视频监控面板 -->
        <div class="col-span-12 lg:col-span-3 space-y-6">
            <!-- 视频监控面板 -->
            <div class="panel bg-dark-light border border-bg-light rounded-lg p-4">
                <div class="panel-header">
                    <span>视频监控</span>
                    <div class="flex space-x-2">
                        <span id="videoStatus" class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">加载中...</span>
                        <button id="refreshVideoListBtn" class="text-xs bg-bg-light px-2 py-0.5 rounded flex items-center">
                            <i class="fa fa-refresh mr-1"></i> 刷新
                        </button>
                        <button id="videoManagerBtn" class="text-xs bg-bg-light px-2 py-0.5 rounded flex items-center">
                            <i class="fa fa-cog mr-1"></i> 管理
                        </button>
                    </div>
                </div>
                <div class="mt-4 grid grid-cols-2 gap-4">
                    <!-- 视频缩略图将通过JavaScript动态生成 -->
                </div>
            </div>
            
            <!-- 系统状态面板 -->
            <div class="panel bg-dark-light border border-bg-light rounded-lg p-4">
                <div class="panel-header">
                    <span>系统状态</span>
                    <span class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">正常</span>
                </div>
                <div class="mt-4 space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm">CPU使用率</span>
                        <div class="flex items-center">
                            <span class="text-sm mr-2">28%</span>
                            <div class="w-24 h-2 bg-bg-light rounded-full overflow-hidden">
                                <div class="h-full bg-primary" style="width: 28%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm">内存使用率</span>
                        <div class="flex items-center">
                            <span class="text-sm mr-2">45%</span>
                            <div class="w-24 h-2 bg-bg-light rounded-full overflow-hidden">
                                <div class="h-full bg-secondary" style="width: 45%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm">存储使用率</span>
                        <div class="flex items-center">
                            <span class="text-sm mr-2">63%</span>
                            <div class="w-24 h-2 bg-bg-light rounded-full overflow-hidden">
                                <div class="h-full bg-status-warning" style="width: 63%"></div>
                            </div>
                        </div>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm">网络状态</span>
                        <div class="flex items-center">
                            <span class="text-sm mr-2">良好</span>
                            <div class="w-24 h-2 bg-bg-light rounded-full overflow-hidden">
                                <div class="h-full bg-primary" style="width: 85%"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 通知面板 -->
            <div class="panel bg-dark-light border border-bg-light rounded-lg p-4">
                <div class="panel-header">
                    <span>最新通知</span>
                    <span class="text-xs bg-status-alert/20 text-status-alert px-2 py-0.5 rounded">3条新消息</span>
                </div>
                <div class="mt-4 space-y-3">
                    <div class="flex items-start">
                        <div class="w-8 h-8 rounded-full bg-status-alert/20 flex items-center justify-center text-status-alert mr-3 mt-0.5">
                            <i class="fa fa-exclamation-triangle"></i>
                        </div>
                        <div>
                            <p class="text-sm">西区农田湿度异常</p>
                            <p class="text-xs text-text-secondary">10分钟前</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-8 h-8 rounded-full bg-status-warning/20 flex items-center justify-center text-status-warning mr-3 mt-0.5">
                            <i class="fa fa-bell"></i>
                        </div>
                        <div>
                            <p class="text-sm">南区农田需要灌溉</p>
                            <p class="text-xs text-text-secondary">30分钟前</p>
                        </div>
                    </div>
                    <div class="flex items-start">
                        <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-3 mt-0.5">
                            <i class="fa fa-check"></i>
                        </div>
                        <div>
                            <p class="text-sm">系统维护完成</p>
                            <p class="text-xs text-text-secondary">2小时前</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 中央农田视图 -->
        <div class="col-span-12 lg:col-span-6 space-y-6">
            <!-- 农田概览面板 -->
            <div class="panel bg-dark-light border border-bg-light rounded-lg p-4">
                <div class="panel-header">
                    <span>农田概览</span>
                    <div class="flex space-x-2">
                        <button class="text-xs bg-bg-light px-2 py-0.5 rounded flex items-center">
                            <i class="fa fa-satellite mr-1"></i> 卫星视图
                        </button>
                        <button class="text-xs bg-bg-light px-2 py-0.5 rounded flex items-center">
                            <i class="fa fa-map mr-1"></i> 地图视图
                        </button>
                    </div>
                </div>
                <div class="mt-4 relative">
                    <div class="w-full h-[400px] bg-bg-light rounded-lg overflow-hidden relative">
                        <!-- 农田俯视图 -->
                        <img src="https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/1b322b8549714162923b1c3ea739e892~tplv-a9rns2rl98-image.image?rcl=2025102814460593BEE518A94BE5BB7B1F&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764225990&x-signature=KS%2FZFXHaZV0JLHYOTNAZiFCU9v8%3D" 
                             alt="农田俯视图" 
                             class="w-full h-full object-cover">
                        
                        <!-- 农田标记点 -->
                        <div class="field-marker" style="top: 30%; left: 25%;" data-field="east"></div>
                        <div class="field-marker" style="top: 25%; left: 70%;" data-field="west"></div>
                        <div class="field-marker warning" style="top: 65%; left: 30%;" data-field="south"></div>
                        <div class="field-marker alert" style="top: 70%; left: 75%;" data-field="north"></div>
                        
                        <!-- 标记点信息提示 -->
                        <div id="field-tooltip" class="hidden absolute bg-dark-light border border-bg-light rounded p-2 text-xs shadow-lg z-20 max-w-xs">
                            <div class="font-medium mb-1">东区农田</div>
                            <div class="grid grid-cols-2 gap-x-4 gap-y-1">
                                <div>温度: <span class="text-primary">25°C</span></div>
                                <div>湿度: <span class="text-primary">65%</span></div>
                                <div>光照: <span class="text-primary">8000 lux</span></div>
                                <div>土壤湿度: <span class="text-primary">45%</span></div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 农田状态概览 -->
                    <div class="grid grid-cols-4 gap-4 mt-4">
                        <div class="bg-bg-light rounded-lg p-3 text-center">
                            <div class="text-2xl font-bold text-primary">4</div>
                            <div class="text-xs text-text-secondary">监测区域</div>
                        </div>
                        <div class="bg-bg-light rounded-lg p-3 text-center">
                            <div class="text-2xl font-bold text-status-warning">1</div>
                            <div class="text-xs text-text-secondary">需注意</div>
                        </div>
                        <div class="bg-bg-light rounded-lg p-3 text-center">
                            <div class="text-2xl font-bold text-status-alert">1</div>
                            <div class="text-xs text-text-secondary">异常</div>
                        </div>
                        <div class="bg-bg-light rounded-lg p-3 text-center">
                            <div class="text-2xl font-bold text-secondary">2</div>
                            <div class="text-xs text-text-secondary">正常</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 作物生长数据面板 -->
            <div class="panel bg-dark-light border border-bg-light rounded-lg p-4">
                <div class="panel-header">
                    <span>作物生长数据</span>
                    <div class="flex space-x-2">
                        <button class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">日</button>
                        <button class="text-xs bg-bg-light px-2 py-0.5 rounded">周</button>
                        <button class="text-xs bg-bg-light px-2 py-0.5 rounded">月</button>
                    </div>
                </div>
                <div class="mt-4">
                    <div class="chart-container">
                        <canvas id="growthChart"></canvas>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧数据面板 -->
        <div class="col-span-12 lg:col-span-3 space-y-6">
            <!-- 环境参数面板 -->
            <div class="panel bg-dark-light border border-bg-light rounded-lg p-4">
                <div class="panel-header">
                    <span>环境参数</span>
                    <span class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">实时更新</span>
                </div>
                <div class="mt-4 space-y-4">
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">温度</span>
                            <span class="text-lg font-bold text-primary">25°C</span>
                        </div>
                        <div class="mt-1 text-xs text-text-secondary">
                            <i class="fa fa-arrow-up text-status-alert"></i> 较昨日 +1.2°C
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">湿度</span>
                            <span class="text-lg font-bold text-primary">65%</span>
                        </div>
                        <div class="mt-1 text-xs text-text-secondary">
                            <i class="fa fa-arrow-down text-status-warning"></i> 较昨日 -3%
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">光照</span>
                            <span class="text-lg font-bold text-primary">8000 lux</span>
                        </div>
                        <div class="mt-1 text-xs text-text-secondary">
                            <i class="fa fa-arrow-up text-primary"></i> 较昨日 +500 lux
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">CO2浓度</span>
                            <span class="text-lg font-bold text-primary">450 ppm</span>
                        </div>
                        <div class="mt-1 text-xs text-text-secondary">
                            <i class="fa fa-minus text-text-secondary"></i> 较昨日 持平
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 土壤参数面板 -->
            <div class="panel bg-dark-light border border-bg-light rounded-lg p-4">
                <div class="panel-header">
                    <span>土壤参数</span>
                    <span class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded">实时更新</span>
                </div>
                <div class="mt-4 space-y-4">
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">土壤湿度</span>
                            <span class="text-lg font-bold text-primary">45%</span>
                        </div>
                        <div class="mt-1 text-xs text-text-secondary">
                            <i class="fa fa-arrow-down text-status-alert"></i> 较昨日 -8%
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">土壤温度</span>
                            <span class="text-lg font-bold text-primary">22°C</span>
                        </div>
                        <div class="mt-1 text-xs text-text-secondary">
                            <i class="fa fa-arrow-up text-status-warning"></i> 较昨日 +0.8°C
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">pH值</span>
                            <span class="text-lg font-bold text-primary">6.8</span>
                        </div>
                        <div class="mt-1 text-xs text-text-secondary">
                            <i class="fa fa-minus text-text-secondary"></i> 较昨日 持平
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-center">
                            <span class="text-sm">电导率</span>
                            <span class="text-lg font-bold text-primary">2.3 mS/cm</span>
                        </div>
                        <div class="mt-1 text-xs text-text-secondary">
                            <i class="fa fa-arrow-up text-primary"></i> 较昨日 +0.2 mS/cm
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 灌溉系统面板 -->
            <div class="panel bg-dark-light border border-bg-light rounded-lg p-4">
                <div class="panel-header">
                    <span>灌溉系统</span>
                    <div class="flex space-x-2">
                        <button class="text-xs bg-primary/20 text-primary px-2 py-0.5 rounded flex items-center">
                            <i class="fa fa-power-off mr-1"></i> 自动
                        </button>
                    </div>
                </div>
                <div class="mt-4 space-y-3">
                    <div class="flex justify-between items-center">
                        <span class="text-sm">东区灌溉</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer" checked>
                            <div class="w-9 h-5 bg-bg-light peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm">西区灌溉</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer" checked>
                            <div class="w-9 h-5 bg-bg-light peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm">南区灌溉</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer" checked>
                            <div class="w-9 h-5 bg-bg-light peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-sm">北区灌溉</span>
                        <label class="relative inline-flex items-center cursor-pointer">
                            <input type="checkbox" class="sr-only peer">
                            <div class="w-9 h-5 bg-bg-light peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:bg-primary"></div>
                        </label>
                    </div>
                    <div class="mt-4 pt-3 border-t border-bg-light">
                        <div class="flex justify-between items-center mb-2">
                            <span class="text-sm">灌溉强度</span>
                            <span class="text-sm">70%</span>
                        </div>
                        <input type="range" min="0" max="100" value="70" class="w-full h-2 bg-bg-light rounded-lg appearance-none cursor-pointer accent-primary">
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 视频播放弹窗 -->
    <div id="videoModal" class="modal">
        <div class="modal-content bg-dark-light border border-bg-light rounded-lg overflow-hidden">
            <span class="close-modal">&times;</span>
            <div class="p-4">
                <div class="flex justify-between items-center mb-4">
                    <h2 id="videoTitle" class="text-lg font-bold">视频监控</h2>
                    <div class="flex space-x-2">
                        <button id="videoFullscreenBtn" class="text-text-secondary hover:text-primary transition-colors">
                            <i class="fa fa-expand"></i>
                        </button>
                        <button id="videoMuteBtn" class="text-text-secondary hover:text-primary transition-colors">
                            <i class="fa fa-volume-up"></i>
                        </button>
                    </div>
                </div>
                <div class="relative">
                    <video id="videoPlayer" class="w-full h-[500px] object-contain bg-black" controls></video>
                    <div id="videoLoading" class="hidden absolute inset-0 flex items-center justify-center bg-black/50">
                        <div class="loader"></div>
                    </div>
                </div>
                <div class="mt-4 grid grid-cols-2 gap-4">
                    <div>
                        <div class="text-sm mb-2">视频信息</div>
                        <div class="text-xs text-text-secondary space-y-1">
                            <div>状态: <span id="videoStatusText" class="text-primary">在线</span></div>
                            <div>分辨率: <span id="videoResolution">1920 x 1080</span></div>
                            <div>码率: <span id="videoBitrate">2500 kbps</span></div>
                            <div>最后更新: <span id="videoLastUpdated">2025-07-21 15:30</span></div>
                        </div>
                    </div>
                    <div>
                        <div class="text-sm mb-2">相关参数</div>
                        <div class="text-xs text-text-secondary space-y-1">
                            <div>温度: <span id="videoTemp">25°C</span></div>
                            <div>湿度: <span id="videoHumidity">65%</span></div>
                            <div>风速: <span id="videoWind">3.2 m/s</span></div>
                            <div>天气: <span id="videoWeather">晴朗</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 视频管理弹窗 -->
    <div id="videoManagerModal" class="modal">
        <div class="modal-content bg-dark-light border border-bg-light rounded-lg overflow-hidden max-w-2xl">
            <span class="close-modal">&times;</span>
            <div class="p-4">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-bold">视频管理</h2>
                    <button id="addVideoBtn" class="bg-primary text-dark px-3 py-1 rounded text-sm font-medium hover:bg-primary/80 transition-colors">
                        <i class="fa fa-plus mr-1"></i> 添加视频
                    </button>
                </div>
                <div id="videoListContainer" class="max-h-[500px] overflow-y-auto pr-2">
                    <!-- 视频列表将通过JavaScript动态生成 -->
                </div>
                <div class="mt-4 flex justify-end">
                    <button id="closeVideoManagerBtn" class="bg-bg-light px-4 py-2 rounded text-sm hover:bg-bg-light/80 transition-colors">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加视频弹窗 -->
    <div id="uploadModal" class="modal">
        <div class="modal-content bg-dark-light border border-bg-light rounded-lg overflow-hidden max-w-md">
            <span class="close-modal">&times;</span>
            <div class="p-4">
                <h2 class="text-lg font-bold mb-4">添加视频源</h2>
                <form id="videoUploadForm">
                    <div class="mb-4">
                        <label for="videoName" class="block text-sm mb-1">视频名称</label>
                        <input type="text" id="videoName" class="w-full bg-bg-light border border-bg-light rounded px-3 py-2 text-sm focus:outline-none focus:border-primary">
                    </div>
                    <div class="mb-4">
                        <label for="videoUrl" class="block text-sm mb-1">视频URL</label>
                        <input type="text" id="videoUrl" class="w-full bg-bg-light border border-bg-light rounded px-3 py-2 text-sm focus:outline-none focus:border-primary" placeholder="例如: /static/smart-agri-videos/east-field.mp4">
                    </div>
                    <div class="mb-4">
                        <label for="thumbnailUrl" class="block text-sm mb-1">缩略图URL (可选)</label>
                        <input type="text" id="thumbnailUrl" class="w-full bg-bg-light border border-bg-light rounded px-3 py-2 text-sm focus:outline-none focus:border-primary">
                    </div>
                    <div id="uploadProgress" class="hidden mb-4">
                        <div class="text-sm mb-1">上传进度</div>
                        <div class="progress-container">
                            <div id="progressBar" class="progress-bar"></div>
                        </div>
                    </div>
                    <div class="flex justify-end space-x-2">
                        <button type="button" id="cancelUploadBtn" class="bg-bg-light px-4 py-2 rounded text-sm hover:bg-bg-light/80 transition-colors">
                            取消
                        </button>
                        <button type="submit" id="saveVideoBtn" class="bg-primary text-dark px-4 py-2 rounded text-sm font-medium hover:bg-primary/80 transition-colors">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 通知中心弹窗 -->
    <div id="notificationModal" class="modal">
        <div class="modal-content bg-dark-light border border-bg-light rounded-lg overflow-hidden max-w-md">
            <span class="close-modal">&times;</span>
            <div class="p-4">
                <h2 class="text-lg font-bold mb-4">通知中心</h2>
                <div class="space-y-4">
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-status-alert/20 flex items-center justify-center text-status-alert mr-3">
                                    <i class="fa fa-exclamation-triangle"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">西区农田湿度异常</p>
                                    <p class="text-xs text-text-secondary">10分钟前</p>
                                </div>
                            </div>
                            <div class="w-2 h-2 rounded-full bg-status-alert"></div>
                        </div>
                        <div class="mt-2 text-xs text-text-secondary">
                            北区农田湿度低于阈值，请检查灌溉系统。
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-status-warning/20 flex items-center justify-center text-status-warning mr-3">
                                    <i class="fa fa-bell"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">南区农田需要灌溉</p>
                                    <p class="text-xs text-text-secondary">30分钟前</p>
                                </div>
                            </div>
                            <div class="w-2 h-2 rounded-full bg-status-warning"></div>
                        </div>
                        <div class="mt-2 text-xs text-text-secondary">
                            南区农田土壤湿度已降至40%，建议进行灌溉。
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-primary/20 flex items-center justify-center text-primary mr-3">
                                    <i class="fa fa-check"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">系统维护完成</p>
                                    <p class="text-xs text-text-secondary">2小时前</p>
                                </div>
                            </div>
                            <div class="w-2 h-2 rounded-full bg-primary"></div>
                        </div>
                        <div class="mt-2 text-xs text-text-secondary">
                            系统例行维护已完成，所有功能正常运行。
                        </div>
                    </div>
                    <div class="bg-bg-light rounded-lg p-3">
                        <div class="flex justify-between items-start">
                            <div class="flex items-center">
                                <div class="w-8 h-8 rounded-full bg-secondary/20 flex items-center justify-center text-secondary mr-3">
                                    <i class="fa fa-info"></i>
                                </div>
                                <div>
                                    <p class="text-sm font-medium">系统更新可用</p>
                                    <p class="text-xs text-text-secondary">5小时前</p>
                                </div>
                            </div>
                            <div class="w-2 h-2 rounded-full bg-secondary"></div>
                        </div>
                        <div class="mt-2 text-xs text-text-secondary">
                            系统版本 2.1.0 已可用，包含新功能和安全更新。
                        </div>
                    </div>
                </div>
                <div class="mt-4 text-center">
                    <button class="text-xs text-primary hover:underline">
                        查看所有通知
                    </button>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 更新当前日期时间
            updateDateTime();
            setInterval(updateDateTime, 1000);
            
            // 初始化作物生长数据图表
            initGrowthChart();
            
            // 初始化农田标记点交互
            initFieldMarkers();
            
            // 初始化弹窗交互
            initModals();
            
            // 初始化视频管理功能
            initVideoManager();
            
            // 初始化通知中心
            initNotificationCenter();
        });

        // 更新当前日期时间
        function updateDateTime() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: '2-digit', 
                day: '2-digit',
                hour: '2-digit', 
                minute: '2-digit', 
                second: '2-digit',
                hour12: false
            };
            document.getElementById('current-date-time').textContent = now.toLocaleString('zh-CN', options);
        }

        // 初始化作物生长数据图表
        function initGrowthChart() {
            const ctx = document.getElementById('growthChart').getContext('2d');
            
            const growthChart = new Chart(ctx, {
                type: 'line',
                data: {
                    labels: ['00:00', '03:00', '06:00', '09:00', '12:00', '15:00', '18:00', '21:00'],
                    datasets: [
                        {
                            label: '东区',
                            data: [12, 13, 14, 16, 18, 20, 21, 20],
                            borderColor: '#00ff9d',
                            backgroundColor: 'rgba(0, 255, 157, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '西区',
                            data: [11, 12, 13, 15, 17, 19, 20, 19],
                            borderColor: '#0088ff',
                            backgroundColor: 'rgba(0, 136, 255, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '南区',
                            data: [10, 11, 12, 14, 16, 18, 19, 18],
                            borderColor: '#ffcc00',
                            backgroundColor: 'rgba(255, 204, 0, 0.1)',
                            tension: 0.4,
                            fill: true
                        },
                        {
                            label: '北区',
                            data: [9, 10, 11, 13, 15, 17, 18, 17],
                            borderColor: '#ff6b00',
                            backgroundColor: 'rgba(255, 107, 0, 0.1)',
                            tension: 0.4,
                            fill: true
                        }
                    ]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'top',
                            labels: {
                                color: '#e6f1ff',
                                font: {
                                    size: 10
                                }
                            }
                        },
                        tooltip: {
                            mode: 'index',
                            intersect: false
                        }
                    },
                    scales: {
                        x: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.05)'
                            },
                            ticks: {
                                color: '#8892b0',
                                font: {
                                    size: 10
                                }
                            }
                        },
                        y: {
                            grid: {
                                color: 'rgba(255, 255, 255, 0.05)'
                            },
                            ticks: {
                                color: '#8892b0',
                                font: {
                                    size: 10
                                }
                            },
                            title: {
                                display: true,
                                text: '生长高度 (cm)',
                                color: '#8892b0',
                                font: {
                                    size: 10
                                }
                            }
                        }
                    }
                }
            });
        }

        // 初始化农田标记点交互
        function initFieldMarkers() {
            const markers = document.querySelectorAll('.field-marker');
            const tooltip = document.getElementById('field-tooltip');
            
            markers.forEach(marker => {
                marker.addEventListener('mouseenter', function(e) {
                    const field = this.dataset.field;
                    let fieldName, temp, humidity, light, soilHumidity;
                    
                    // 根据不同区域设置不同的数据
                    switch(field) {
                        case 'east':
                            fieldName = '东区农田';
                            temp = '25°C';
                            humidity = '65%';
                            light = '8000 lux';
                            soilHumidity = '45%';
                            break;
                        case 'west':
                            fieldName = '西区农田';
                            temp = '24°C';
                            humidity = '63%';
                            light = '7800 lux';
                            soilHumidity = '47%';
                            break;
                        case 'south':
                            fieldName = '南区农田';
                            temp = '26°C';
                            humidity = '60%';
                            light = '8200 lux';
                            soilHumidity = '40%';
                            break;
                        case 'north':
                            fieldName = '北区农田';
                            temp = '23°C';
                            humidity = '58%';
                            light = '7500 lux';
                            soilHumidity = '35%';
                            break;
                    }
                    
                    // 更新提示内容
                    tooltip.innerHTML = `
                        <div class="font-medium mb-1">${fieldName}</div>
                        <div class="grid grid-cols-2 gap-x-4 gap-y-1">
                            <div>温度: <span class="text-primary">${temp}</span></div>
                            <div>湿度: <span class="text-primary">${humidity}</span></div>
                            <div>光照: <span class="text-primary">${light}</span></div>
                            <div>土壤湿度: <span class="text-primary">${soilHumidity}</span></div>
                        </div>
                    `;
                    
                    // 显示提示并定位
                    tooltip.classList.remove('hidden');
                    tooltip.style.left = `${e.pageX + 10}px`;
                    tooltip.style.top = `${e.pageY + 10}px`;
                });
                
                marker.addEventListener('mousemove', function(e) {
                    // 跟随鼠标移动
                    tooltip.style.left = `${e.pageX + 10}px`;
                    tooltip.style.top = `${e.pageY + 10}px`;
                });
                
                marker.addEventListener('mouseleave', function() {
                    // 隐藏提示
                    tooltip.classList.add('hidden');
                });
                
                marker.addEventListener('click', function() {
                    const field = this.dataset.field;
                    let videoId;
                    
                    // 根据不同区域设置不同的视频ID
                    switch(field) {
                        case 'east': videoId = 1; break;
                        case 'west': videoId = 2; break;
                        case 'south': videoId = 3; break;
                        case 'north': videoId = 4; break;
                    }
                    
                    // 找到对应的视频源并打开视频弹窗
                    const videoSource = videoSources.find(video => video.id === videoId);
                    if (videoSource) {
                        currentVideo = videoSource;
                        openVideoModal();
                    }
                });
            });
        }

        // 初始化弹窗交互
        function initModals() {
            // 视频弹窗
            const videoModal = document.getElementById('videoModal');
            const closeVideoModal = document.querySelector('#videoModal .close-modal');
            
            closeVideoModal.addEventListener('click', function() {
                closeVideoModalFunc();
            });
            
            // 点击弹窗外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === videoModal) {
                    closeVideoModalFunc();
                }
            });
            
            // 视频全屏按钮
            const videoFullscreenBtn = document.getElementById('videoFullscreenBtn');
            videoFullscreenBtn.addEventListener('click', function() {
                toggleFullscreen();
            });
            
            // 视频静音按钮
            const videoMuteBtn = document.getElementById('videoMuteBtn');
            videoMuteBtn.addEventListener('click', function() {
                toggleMute();
            });
            
            // 视频管理弹窗
            const videoManagerModal = document.getElementById('videoManagerModal');
            const closeVideoManagerModal = document.querySelector('#videoManagerModal .close-modal');
            const videoManagerBtn = document.getElementById('videoManagerBtn');
            
            videoManagerBtn.addEventListener('click', function() {
                openVideoManagerModal();
            });
            
            closeVideoManagerModal.addEventListener('click', function() {
                closeVideoManagerModalFunc();
            });
            
            // 点击弹窗外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === videoManagerModal) {
                    closeVideoManagerModalFunc();
                }
            });
            
            // 添加视频弹窗
            const uploadModal = document.getElementById('uploadModal');
            const closeUploadModal = document.querySelector('#uploadModal .close-modal');
            const addVideoBtn = document.getElementById('addVideoBtn');
            
            addVideoBtn.addEventListener('click', function() {
                openUploadModal();
            });
            
            closeUploadModal.addEventListener('click', function() {
                closeUploadModalFunc();
            });
            
            // 点击弹窗外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === uploadModal) {
                    closeUploadModalFunc();
                }
            });
            
            // 通知中心弹窗
            const notificationModal = document.getElementById('notificationModal');
            const closeNotificationModal = document.querySelector('#notificationModal .close-modal');
            const notificationBtn = document.getElementById('notificationBtn');
            
            notificationBtn.addEventListener('click', function() {
                openNotificationModal();
            });
            
            closeNotificationModal.addEventListener('click', function() {
                closeNotificationModalFunc();
            });
            
            // 点击弹窗外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === notificationModal) {
                    closeNotificationModalFunc();
                }
            });
        }

        // 视频源数据（将从服务器动态加载）
        let videoSources = [];
        
        // 当前选中的视频
        let currentVideo = null;
        
        // 从服务器获取视频文件列表
        function fetchVideoListFromServer() {
            // 清除localStorage中的缓存数据，确保使用最新的视频列表
            localStorage.removeItem('videoSources');
            // 显示加载提示
            showToast('正在加载视频列表...');
            
            // 从Flask API获取视频列表
            fetch('/api/video_list')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    return response.json();
                })
                .then(videos => {
                    // 更新视频源数据
                    videoSources = videos;
                    
                    // 初始化视频缩略图
                    initVideoThumbnails();
                    
                    // 更新视频状态显示
                    updateVideoStatus();
                    
                    // 显示成功提示
                    showToast('视频列表加载成功');
                })
                .catch(error => {
                    console.error('获取视频列表失败:', error);
                    
                    // 尝试从本地存储获取
                    const storedVideos = localStorage.getItem('videoSources');
                    if (storedVideos) {
                        videoSources = JSON.parse(storedVideos);
                        initVideoThumbnails();
                        updateVideoStatus();
                        showToast('从本地缓存加载视频列表', 'warning');
                    } else {
                        // 使用模拟数据
                        videoSources = generateMockVideoSources();
                        initVideoThumbnails();
                        updateVideoStatus();
                        showToast('使用模拟视频数据', 'warning');
                    }
                });
        }
        
        // 生成模拟视频源数据
        function generateMockVideoSources() {
            const mockVideoFiles = [
                { name: 'east-field.mp4', status: 'online' },
                { name: 'west-field.mp4', status: 'online' },
                { name: 'south-field.mp4', status: 'warning' },
                { name: 'north-field.mp4', status: 'alert' }
            ];
            
            return mockVideoFiles.map((file, index) => {
                // 从文件名提取视频名称（去掉扩展名）
                const videoName = file.name.substring(0, file.name.lastIndexOf('.'))
                    .replace(/-/g, ' ')
                    .replace(/^./, str => str.toUpperCase());
                
                // 创建视频源对象
                return {
                    id: index + 1,
                    name: videoName,
                    thumbnail: `https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/1b322b8549714162923b1c3ea739e892~tplv-a9rns2rl98-image.image?rcl=2025102814460593BEE518A94BE5BB7B1F&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764225990&x-signature=KS%2FZFXHaZV0JLHYOTNAZiFCU9v8%3D`,
                    videoUrl: `/static/smart-agri-videos/${file.name}`,
                    status: file.status,
                    lastUpdated: new Date().toLocaleString('zh-CN', { 
                        year: 'numeric', 
                        month: '2-digit', 
                        day: '2-digit', 
                        hour: '2-digit', 
                        minute: '2-digit'
                    })
                };
            });
        }

        // 初始化视频缩略图
        function initVideoThumbnails() {
            const thumbnailContainer = document.querySelector('.grid.grid-cols-2.gap-4');
            thumbnailContainer.innerHTML = '';
            
            if (videoSources.length === 0) {
                // 如果没有视频文件，显示提示信息
                const emptyMessage = document.createElement('div');
                emptyMessage.className = 'col-span-2 text-center py-8 text-gray-400';
                emptyMessage.innerHTML = `
                    <i class="fa fa-film text-3xl mb-2"></i>
                    <p>未检测到视频文件</p>
                    <p class="text-xs mt-1">请在 /static/smart-agri-videos/ 文件夹中添加视频文件</p>
                `;
                thumbnailContainer.appendChild(emptyMessage);
                return;
            }
            
            videoSources.forEach((source, index) => {
                const thumbnailDiv = document.createElement('div');
                thumbnailDiv.className = 'video-thumbnail relative';
                thumbnailDiv.dataset.videoId = source.id;
                
                // 创建视频元素作为缩略图
                const video = document.createElement('video');
                video.src = source.videoUrl;
                video.poster = source.thumbnail;
                video.loop = true;
                video.muted = true;
                video.autoplay = true;
                video.playsInline = true;
                video.className = 'w-full h-24 object-cover';
                video.volume = 0;
                
                // 添加视频加载事件
                video.addEventListener('loadeddata', () => {
                    // 只播放第一帧作为缩略图
                    video.currentTime = 0;
                    video.pause();
                });
                
                // 添加视频错误处理
                video.addEventListener('error', () => {
                    console.error(`无法加载视频: ${source.videoUrl}`);
                    // 显示错误图标
                    const errorIcon = document.createElement('div');
                    errorIcon.className = 'absolute inset-0 flex items-center justify-center bg-black/50';
                    errorIcon.innerHTML = '<i class="fa fa-exclamation-triangle text-red-500 text-2xl"></i>';
                    thumbnailDiv.appendChild(errorIcon);
                    
                    // 更新视频状态
                    source.status = 'error';
                });
                
                // 创建状态指示器
                const indicator = document.createElement('div');
                indicator.className = `camera-indicator`;
                
                // 根据状态设置不同的颜色
                if (source.status === 'online') {
                    indicator.classList.add('bg-status-online');
                    indicator.style.boxShadow = '0 0 5px #00ff9d';
                } else if (source.status === 'warning') {
                    indicator.classList.add('bg-status-warning');
                    indicator.style.boxShadow = '0 0 5px #ffcc00';
                } else if (source.status === 'alert') {
                    indicator.classList.add('bg-status-alert');
                    indicator.style.boxShadow = '0 0 5px #ff6b00';
                } else {
                    indicator.classList.add('bg-red-500');
                    indicator.style.boxShadow = '0 0 5px #ff4d4d';
                }
                
                // 创建视频名称标签
                const nameTag = document.createElement('div');
                nameTag.className = 'absolute bottom-0 left-0 right-0 bg-black/60 text-xs p-1 text-center';
                nameTag.textContent = source.name;
                
                thumbnailDiv.appendChild(video);
                thumbnailDiv.appendChild(indicator);
                thumbnailDiv.appendChild(nameTag);
                thumbnailContainer.appendChild(thumbnailDiv);
                
                // 添加点击事件
                thumbnailDiv.addEventListener('click', () => {
                    if (source.status === 'error') {
                        showToast('视频文件无法加载，请检查文件路径或文件格式', 'error');
                        return;
                    }
                    
                    currentVideo = source;
                    openVideoModal();
                });
            });
        }

        // 更新视频状态显示
        function updateVideoStatus() {
            const videoStatusElement = document.getElementById('videoStatus');
            if (!videoStatusElement || videoSources.length === 0) return;
            
            // 统计各种状态的视频数量
            const statusCount = {
                online: 0,
                warning: 0,
                alert: 0,
                error: 0
            };
            
            videoSources.forEach(source => {
                if (source.status && statusCount.hasOwnProperty(source.status)) {
                    statusCount[source.status]++;
                } else {
                    statusCount.error++;
                }
            });
            
            // 更新状态显示
            if (statusCount.error > 0) {
                videoStatusElement.className = 'text-xs bg-red-500/20 text-red-500 px-2 py-0.5 rounded';
                videoStatusElement.textContent = `${statusCount.error}个视频无法加载`;
            } else if (statusCount.alert > 0) {
                videoStatusElement.className = 'text-xs bg-status-alert/20 text-status-alert px-2 py-0.5 rounded';
                videoStatusElement.textContent = `${statusCount.alert}个视频有异常`;
            } else if (statusCount.warning > 0) {
                videoStatusElement.className = 'text-xs bg-status-warning/20 text-status-warning px-2 py-0.5 rounded';
                videoStatusElement.textContent = `${statusCount.warning}个视频需注意`;
            } else {
                videoStatusElement.className = 'text-xs bg-primary/20 text-primary px-2 py-0.5 rounded';
                videoStatusElement.textContent = '全部正常';
            }
        }

        // 初始化视频管理功能
        function initVideoManager() {
            // 视频列表容器
            const videoListContainer = document.getElementById('videoListContainer');
            
            // 从服务器获取视频列表
            fetchVideoListFromServer();
            
            // 添加刷新视频列表按钮事件
            const refreshVideoListBtn = document.getElementById('refreshVideoListBtn');
            if (refreshVideoListBtn) {
                refreshVideoListBtn.addEventListener('click', () => {
                    // 清除localStorage中的缓存数据
                    localStorage.removeItem('videoSources');
                    fetchVideoListFromServer();
                });
            }
            
            // 处理视频上传表单（在Flask应用中，实际的文件上传需要后端支持）
            const videoUploadForm = document.getElementById('videoUploadForm');
            if (videoUploadForm) {
                videoUploadForm.addEventListener('submit', (e) => {
                    e.preventDefault();
                    
                    const videoNameInput = document.getElementById('videoName');
                    const videoUrlInput = document.getElementById('videoUrl');
                    const thumbnailUrlInput = document.getElementById('thumbnailUrl');
                    
                    if (!videoNameInput || !videoUrlInput || !thumbnailUrlInput) return;
                    
                    const name = videoNameInput.value;
                    const videoUrl = videoUrlInput.value;
                    const thumbnailUrl = thumbnailUrlInput.value;
                    
                    if (!name || !videoUrl) {
                        showToast('请填写视频名称和URL', 'error');
                        return;
                    }
                    
                    // 检查是否是本地视频文件路径
                    if (!videoUrl.startsWith('/static/smart-agri-videos/') && !videoUrl.startsWith('static/smart-agri-videos/')) {
                        showToast('请将视频文件上传到 /static/smart-agri-videos/ 文件夹', 'error');
                        return;
                    }
                    
                    // 模拟上传进度
                    simulateUploadProgress();
                    
                    // 创建新的视频源
                    const newVideo = {
                        id: Date.now(), // 使用时间戳作为唯一ID
                        name: name,
                        thumbnail: thumbnailUrl || 'https://p3-flow-imagex-sign.byteimg.com/tos-cn-i-a9rns2rl98/rc/pc/super_tool/1b322b8549714162923b1c3ea739e892~tplv-a9rns2rl98-image.image?rcl=2025102814460593BEE518A94BE5BB7B1F&rk3s=8e244e95&rrcfp=f06b921b&x-expires=1764225990&x-signature=KS%2FZFXHaZV0JLHYOTNAZiFCU9v8%3D',
                        videoUrl: videoUrl.startsWith('/') ? videoUrl : '/' + videoUrl,
                        status: 'online',
                        lastUpdated: new Date().toLocaleString('zh-CN', { 
                            year: 'numeric', 
                            month: '2-digit', 
                            day: '2-digit',
                            hour: '2-digit', 
                            minute: '2-digit'
                        })
                    };
                    
                    // 添加到视频源列表
                    videoSources.push(newVideo);
                    
                    // 保存到本地存储
                    localStorage.setItem('videoSources', JSON.stringify(videoSources));
                    
                    // 重新初始化视频缩略图和列表
                    setTimeout(() => {
                        initVideoThumbnails();
                        renderVideoList();
                        updateVideoStatus();
                        
                        // 重置表单
                        videoUploadForm.reset();
                        
                        // 关闭弹窗
                        closeUploadModalFunc();
                        
                        // 显示成功提示
                        showToast('视频源添加成功');
                    }, 1500);
                });
            }
        }

        // 渲染视频列表
        function renderVideoList() {
            const videoListContainer = document.getElementById('videoListContainer');
            if (!videoListContainer) return;
            
            videoListContainer.innerHTML = '';
            
            if (videoSources.length === 0) {
                // 如果没有视频文件，显示提示信息
                const emptyMessage = document.createElement('div');
                emptyMessage.className = 'text-center py-8 text-gray-400';
                emptyMessage.innerHTML = `
                    <i class="fa fa-film text-3xl mb-2"></i>
                    <p>未检测到视频文件</p>
                    <p class="text-xs mt-1">请在 /static/smart-agri-videos/ 文件夹中添加视频文件</p>
                `;
                videoListContainer.appendChild(emptyMessage);
                return;
            }
            
            videoSources.forEach(source => {
                const videoItem = document.createElement('div');
                videoItem.className = 'bg-bg-light/50 p-3 rounded-lg mb-3 flex items-center justify-between';
                
                const leftDiv = document.createElement('div');
                leftDiv.className = 'flex items-center';
                
                const statusIndicator = document.createElement('div');
                statusIndicator.className = `w-2 h-2 rounded-full mr-2`;
                
                // 根据状态设置不同的颜色
                if (source.status === 'online') {
                    statusIndicator.classList.add('bg-status-online');
                } else if (source.status === 'warning') {
                    statusIndicator.classList.add('bg-status-warning');
                } else if (source.status === 'alert') {
                    statusIndicator.classList.add('bg-status-alert');
                } else {
                    statusIndicator.classList.add('bg-red-500');
                }
                
                const infoDiv = document.createElement('div');
                
                const nameDiv = document.createElement('div');
                nameDiv.className = 'font-medium';
                nameDiv.textContent = source.name;
                
                const urlDiv = document.createElement('div');
                urlDiv.className = 'text-xs text-gray-400 truncate max-w-xs';
                urlDiv.textContent = source.videoUrl;
                
                const timeDiv = document.createElement('div');
                timeDiv.className = 'text-xs text-gray-500';
                timeDiv.textContent = `最后更新: ${source.lastUpdated}`;
                
                infoDiv.appendChild(nameDiv);
                infoDiv.appendChild(urlDiv);
                infoDiv.appendChild(timeDiv);
                
                leftDiv.appendChild(statusIndicator);
                leftDiv.appendChild(infoDiv);
                
                const rightDiv = document.createElement('div');
                rightDiv.className = 'flex space-x-2';
                
                const editBtn = document.createElement('button');
                editBtn.className = 'text-xs bg-primary/20 text-primary px-2 py-1 rounded flex items-center';
                editBtn.innerHTML = '<i class="fa fa-pencil mr-1"></i> 编辑';
                editBtn.addEventListener('click', () => {
                    editVideoSource(source.id);
                });
                
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'text-xs bg-red-500/20 text-red-500 px-2 py-1 rounded flex items-center';
                deleteBtn.innerHTML = '<i class="fa fa-trash mr-1"></i> 删除';
                deleteBtn.addEventListener('click', () => {
                    deleteVideoSource(source.id);
                });
                
                rightDiv.appendChild(editBtn);
                rightDiv.appendChild(deleteBtn);
                
                videoItem.appendChild(leftDiv);
                videoItem.appendChild(rightDiv);
                
                videoListContainer.appendChild(videoItem);
            });
        }

        // 编辑视频源
        function editVideoSource(id) {
            const video = videoSources.find(v => v.id === id);
            if (!video) return;
            
            // 填充表单数据
            document.getElementById('videoName').value = video.name;
            document.getElementById('videoUrl').value = video.videoUrl;
            document.getElementById('thumbnailUrl').value = video.thumbnail;
            
            // 更改表单提交处理
            const videoUploadForm = document.getElementById('videoUploadForm');
            const originalSubmitHandler = videoUploadForm.onsubmit;
            
            videoUploadForm.onsubmit = function(e) {
                e.preventDefault();
                
                const name = document.getElementById('videoName').value;
                const videoUrl = document.getElementById('videoUrl').value;
                const thumbnailUrl = document.getElementById('thumbnailUrl').value;
                
                if (!name || !videoUrl) {
                    showToast('请填写视频名称和URL', 'error');
                    return;
                }
                
                // 更新视频源数据
                video.name = name;
                video.videoUrl = videoUrl;
                video.thumbnail = thumbnailUrl || video.thumbnail;
                video.lastUpdated = new Date().toLocaleString('zh-CN', { 
                    year: 'numeric', 
                    month: '2-digit', 
                    day: '2-digit',
                    hour: '2-digit', 
                    minute: '2-digit'
                });
                
                // 保存到本地存储
                localStorage.setItem('videoSources', JSON.stringify(videoSources));
                
                // 重新初始化视频缩略图和列表
                initVideoThumbnails();
                renderVideoList();
                updateVideoStatus();
                
                // 重置表单
                videoUploadForm.reset();
                
                // 恢复原始提交处理
                videoUploadForm.onsubmit = originalSubmitHandler;
                
                // 关闭弹窗
                closeUploadModalFunc();
                
                // 显示成功提示
                showToast('视频源更新成功');
            };
            
            // 打开上传弹窗
            openUploadModal();
        }

        // 删除视频源
        function deleteVideoSource(id) {
            if (confirm('确定要删除这个视频源吗？')) {
                // 从视频源列表中删除
                videoSources = videoSources.filter(video => video.id !== id);
                
                // 保存到本地存储
                localStorage.setItem('videoSources', JSON.stringify(videoSources));
                
                // 重新初始化视频缩略图和列表
                initVideoThumbnails();
                renderVideoList();
                updateVideoStatus();
                
                // 显示成功提示
                showToast('视频源删除成功');
            }
        }

        // 模拟上传进度
        function simulateUploadProgress() {
            const uploadProgress = document.getElementById('uploadProgress');
            const progressBar = document.getElementById('progressBar');
            const saveVideoBtn = document.getElementById('saveVideoBtn');
            
            // 显示进度条
            uploadProgress.classList.remove('hidden');
            progressBar.style.width = '0%';
            
            // 禁用保存按钮
            saveVideoBtn.disabled = true;
            saveVideoBtn.innerHTML = '<div class="loader mx-auto" style="width: 16px; height: 16px;"></div>';
            
            // 模拟进度
            let progress = 0;
            const interval = setInterval(() => {
                progress += Math.random() * 10;
                if (progress >= 100) {
                    progress = 100;
                    clearInterval(interval);
                    
                    // 延迟一点时间再完成，让用户看到100%的状态
                    setTimeout(() => {
                        // 隐藏进度条
                        uploadProgress.classList.add('hidden');
                        
                        // 恢复保存按钮
                        saveVideoBtn.disabled = false;
                        saveVideoBtn.innerHTML = '保存';
                    }, 500);
                }
                
                progressBar.style.width = `${progress}%`;
            }, 200);
        }

        // 打开视频弹窗
        function openVideoModal() {
            if (!currentVideo) return;
            
            const videoModal = document.getElementById('videoModal');
            const videoPlayer = document.getElementById('videoPlayer');
            const videoTitle = document.getElementById('videoTitle');
            const videoStatusText = document.getElementById('videoStatusText');
            const videoLastUpdated = document.getElementById('videoLastUpdated');
            const videoLoading = document.getElementById('videoLoading');
            
            // 设置视频信息
            videoTitle.textContent = currentVideo.name;
            videoStatusText.textContent = getStatusText(currentVideo.status);
            videoStatusText.className = getStatusClass(currentVideo.status);
            videoLastUpdated.textContent = currentVideo.lastUpdated;
            
            // 设置视频源
            videoPlayer.src = currentVideo.videoUrl;
            
            // 显示加载动画
            videoLoading.classList.remove('hidden');
            
            // 视频加载完成后隐藏加载动画
            videoPlayer.addEventListener('loadeddata', function() {
                videoLoading.classList.add('hidden');
            });
            
            // 视频加载失败
            videoPlayer.addEventListener('error', function() {
                videoLoading.classList.add('hidden');
                showToast('视频加载失败', 'error');
            });
            
            // 显示弹窗
            videoModal.style.display = 'block';
        }

        // 关闭视频弹窗
        function closeVideoModalFunc() {
            const videoModal = document.getElementById('videoModal');
            const videoPlayer = document.getElementById('videoPlayer');
            
            // 暂停视频
            videoPlayer.pause();
            
            // 显示弹窗
            videoModal.style.display = 'none';
        }

        // 切换全屏
        function toggleFullscreen() {
            const videoPlayer = document.getElementById('videoPlayer');
            const videoFullscreenBtn = document.getElementById('videoFullscreenBtn');
            
            if (!document.fullscreenElement) {
                // 进入全屏
                if (videoPlayer.requestFullscreen) {
                    videoPlayer.requestFullscreen();
                } else if (videoPlayer.mozRequestFullScreen) {
                    videoPlayer.mozRequestFullScreen();
                } else if (videoPlayer.webkitRequestFullscreen) {
                    videoPlayer.webkitRequestFullscreen();
                } else if (videoPlayer.msRequestFullscreen) {
                    videoPlayer.msRequestFullscreen();
                }
                
                videoFullscreenBtn.innerHTML = '<i class="fa fa-compress"></i>';
            } else {
                // 退出全屏
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
                
                videoFullscreenBtn.innerHTML = '<i class="fa fa-expand"></i>';
            }
        }

        // 切换静音
        function toggleMute() {
            const videoPlayer = document.getElementById('videoPlayer');
            const videoMuteBtn = document.getElementById('videoMuteBtn');
            
            videoPlayer.muted = !videoPlayer.muted;
            
            if (videoPlayer.muted) {
                videoMuteBtn.innerHTML = '<i class="fa fa-volume-off"></i>';
            } else {
                videoMuteBtn.innerHTML = '<i class="fa fa-volume-up"></i>';
            }
        }

        // 打开视频管理弹窗
        function openVideoManagerModal() {
            const videoManagerModal = document.getElementById('videoManagerModal');
            
            // 渲染视频列表
            renderVideoList();
            
            // 显示弹窗
            videoManagerModal.style.display = 'block';
        }

        // 关闭视频管理弹窗
        function closeVideoManagerModalFunc() {
            const videoManagerModal = document.getElementById('videoManagerModal');
            
            // 显示弹窗
            videoManagerModal.style.display = 'none';
        }

        // 打开上传弹窗
        function openUploadModal() {
            const uploadModal = document.getElementById('uploadModal');
            
            // 重置表单
            document.getElementById('videoUploadForm').reset();
            
            // 隐藏进度条
            document.getElementById('uploadProgress').classList.add('hidden');
            
            // 显示弹窗
            uploadModal.style.display = 'block';
        }

        // 关闭上传弹窗
        function closeUploadModalFunc() {
            const uploadModal = document.getElementById('uploadModal');
            
            // 显示弹窗
            uploadModal.style.display = 'none';
        }

        // 初始化通知中心
        function initNotificationCenter() {
            // 点击通知标记点也可以打开通知中心
            const notificationBadge = document.querySelector('.notification-badge');
            if (notificationBadge) {
                notificationBadge.addEventListener('click', function(e) {
                    e.stopPropagation();
                    openNotificationModal();
                });
            }
        }

        // 打开通知中心弹窗
        function openNotificationModal() {
            const notificationModal = document.getElementById('notificationModal');
            
            // 显示弹窗
            notificationModal.style.display = 'block';
            
            // 清除通知标记
            const notificationBadge = document.querySelector('.notification-badge');
            if (notificationBadge) {
                notificationBadge.remove();
            }
        }

        // 关闭通知中心弹窗
        function closeNotificationModalFunc() {
            const notificationModal = document.getElementById('notificationModal');
            
            // 显示弹窗
            notificationModal.style.display = 'none';
        }

        // 显示提示消息
        function showToast(message, type = 'success') {
            // 创建提示元素
            const toast = document.createElement('div');
            toast.className = `fixed bottom-4 right-4 px-4 py-2 rounded-lg shadow-lg z-50 transition-opacity duration-300 ${
                type === 'success' ? 'bg-green-500' : 'bg-red-500'
            }`;
            toast.textContent = message;
            
            // 添加到页面
            document.body.appendChild(toast);
            
            // 淡入效果
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            // 自动关闭
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 3000);
        }

        // 获取状态文本
        function getStatusText(status) {
            switch(status) {
                case 'online': return '在线';
                case 'warning': return '需注意';
                case 'alert': return '异常';
                default: return '未知';
            }
        }

        // 获取状态样式类
        function getStatusClass(status) {
            switch(status) {
                case 'online': return 'text-primary';
                case 'warning': return 'text-status-warning';
                case 'alert': return 'text-status-alert';
                default: return 'text-text-secondary';
            }
        }
    </script>
</body>
</html>
